<template>
	<view class="indx-s mains">
		<u-gap height="5"></u-gap>
		<view style="display: flex">
			<u-icon name="../../static/font/shuxian.png" size="10"></u-icon>
			<span class="textTitleStyle">普通账户</span>
		</view>
		<u-gap height="7"></u-gap>
		<view>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view @click="openAddAccount(`储蓄卡`)">
						<u-icon name="../../static/accountType/yinhangka.png" size="40"></u-icon>
						<span class="textStyle">储蓄卡</span>
					</view>
				</u-col>
				<u-col span="3">
					<view @click="openAddAccount(`支付宝`)">
						<u-icon name="../../static/accountType/zhifubao.png" size="40"></u-icon>
						<span class="textStyle">支付宝</span>
					</view>
				</u-col>
				<u-col span="3">
					<view @click="openAddAccount(`微信`)">
						<u-icon name="../../static/accountType/weixin.png" size="40"></u-icon>
						<span class="textStyle">微信</span>
					</view>
				</u-col>
				</u-col>
			</u-row>
		</view>
		<u-gap height="7"></u-gap>
		<view style="display: flex">
			<u-icon name="../../static/font/shuxian.png" size="10"></u-icon>
			<span class="textTitleStyle">投资理财</span>
		</view>
		<u-gap height="7"></u-gap>
		<view>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view @click="openAddAccount(`股票`)">
						<u-icon name="../../static/accountType/gupiao.png" size="40"></u-icon>
						<span class="textStyle">股票</span>
					</view>
				</u-col>
				<u-col span="3">
					<view @click="openAddAccount(`余利宝`)">
						<u-icon name="../../static/accountType/yulibao.png" size="40"></u-icon>
						<span class="textStyle">余利宝</span>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-gap height="7"></u-gap>
		<view style="display: flex">
			<u-icon name="../../static/font/shuxian.png" size="10"></u-icon>
			<span class="textTitleStyle">其他</span>
		</view>
		<u-gap height="7"></u-gap>
		<view>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view @click="openAddAccount(`其他`)">
						<u-icon name="../../static/accountType/qita.png" size="40"></u-icon>
						<span class="textStyle">其他</span>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import moneyService from '../../dbservice/moneyService';
	import toolUtil from '../../util/toolUtil.js';
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onReady() {},
		methods: {
			openAddAccount(e) {
				uni.navigateTo({
					url : "/pageSub/accountChange/addAccountDetail?type=" + e
				});
			}
		}
	}
</script>

<style lang="scss">
	.mains {
		padding-left: 6%;
	}

	.textStyle {
		font-size: 14px;
		color: #000000;
	}

	.textTitleStyle {
		font-size: 18px;
		font-weight: bold;
		color: #797979;
	}

	.indx {
		// background: url('../../static/image.webp');
		// background-size: cover;

		// background-color: #FAACA8;
		// background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);

		// background-color: #FF9A8B;
		// background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);

		// background-color: #FBDA61;
		// background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);

		background-color: #85FFBD;
		background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

		height: 100%;
		width: 100%;
	}

	.maoboli {
		padding-top: 10px;
		padding-bottom: 10px;
		width: 90%;
		height: 250px;
		background: transparent;
		border: 2px solid rgba(255, 255, 255, 0.1);
		border-radius: 25px; //圆角
		background-color: rgba(255, 255, 255, 0.1); //透明度
		backdrop-filter: blur(5px); //毛玻璃效果
		background-attachment: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>